<!DOCTYPE html>

<!--
  Google HTML5 slide template

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/html5slides/
-->

<html>
    <head>
        <title>Presentation</title>

        <meta charset='utf-8'>
        <script
        src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
    </head>

    <style>
        /* Your individual styles here, or just use inline styles if that’s
           what you want. */


    </style>

    <body style='display: none'>

        <section class='slides layout-regular template-default'>

            <!-- Your slides (<article>s) go here. Delete or comment out the
                 slides below. -->



            <article class='biglogo'>
            </article>

            <article>
                <h1>
                    Title Goes Here Up
                    <br>
                    To Two Lines
                </h1>
                <p>
                    Sergey Brin
                    <br>
                    May 10, 2011
                </p>
            </article>

            <article>
                <p>
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                </p>
                <p>
                    There is more text just underneath.
                </p>
            </article>

            <article>
                <h3>
                    Simple slide with header and text
                </h3>
                <p>
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                </p>
                <p>
                    There is more text just underneath with a <code>code sample: 5px</code>.
                </p>
            </article>

            <article class='smaller'>
                <h3>
                    Simple slide with header and text (small font)
                </h3>
                <p>
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                    This is a slide with just text. This is a slide with just text.
                </p>
                <p>
                    There is more text just underneath with a <code>code sample: 5px</code>.
                </p>
            </article>

            <article>
                <h3>
                    Slide with bullet points and a longer title, just because we
                    can make it longer
                </h3>
                <ul>
                    <li>
                        Use this template to create your presentation
                    </li>
                    <li>
                        Use the provided color palette, box and arrow graphics, and
                        chart styles
                    </li>
                    <li>
                        Instructions are provided to assist you in using this
                        presentation template effectively
                    </li>
                    <li>
                        At all times strive to maintain Google's corporate look and feel
                    </li>
                </ul>
            </article>

            <article>
                <h3>
                    Slide with bullet points that builds
                </h3>
                <ul class="build">
                    <li>
                        This is an example of a list
                    </li>
                    <li>
                        The list items fade in
                    </li>
                    <li>
                        Last one!
                    </li>
                </ul>

                <div class="build">
                    <p>Any element with child nodes can build.</p>
                    <p>It doesn't have to be a list.</p>
                </div>
            </article>

            <article class='smaller'>
                <h3>
                    Slide with bullet points (small font)
                </h3>
                <ul>
                    <li>
                        Use this template to create your presentation
                    <li>
                        Use the provided color palette, box and arrow graphics, and
                        chart styles
                    <li>
                        Instructions are provided to assist you in using this
                        presentation template effectively
                    <li>
                        At all times strive to maintain Google's corporate look and feel
                </ul>
            </article>

            <article>
                <h3>
                    Slide with a table
                </h3>

                <table>
                    <tr>
                        <th>
                            Name
                        <th>
                            Occupation
                    <tr>
                        <td>
                            Luke Mahé
                        <td>
                            V.P. of Keepin’ It Real
                    <tr>
                        <td>
                            Marcin Wichary
                        <td>
                            The Michael Bay of Doodles
                </table>
            </article>

            <article class='smaller'>
                <h3>
                    Slide with a table (smaller text)
                </h3>

                <table>
                    <tr>
                        <th>
                            Name
                        <th>
                            Occupation
                    <tr>
                        <td>
                            Luke Mahé
                        <td>
                            V.P. of Keepin’ It Real
                    <tr>
                        <td>
                            Marcin Wichary
                        <td>
                            The Michael Bay of Doodles
                </table>
            </article>

            <article>
                <h3>
                    Styles
                </h3>
                <ul>
                    <li>
                        <span class='red'>class="red"</span>
                    <li>
                        <span class='blue'>class="blue"</span>
                    <li>
                        <span class='green'>class="green"</span>
                    <li>
                        <span class='yellow'>class="yellow"</span>
                    <li>
                        <span class='black'>class="black"</span>
                    <li>
                        <span class='white'>class="white"</span>
                    <li>
                        <b>bold</b> and <i>italic</i>
                </ul>
            </article>

            <article>
                <h2>
                    Segue slide
                </h2>
            </article>

            <article>
                <h3>
                    Slide with an image
                </h3>
                <p>
                    <img style='height: 500px' src='images/example-graph.png'>
                </p>
                <div class='source'>
                    Source: Sergey Brin
                </div>
            </article>

            <article>
                <h3>
                    Slide with an image (centered)
                </h3>
                <p>
                    <img class='centered' style='height: 500px' src='images/example-graph.png'>
                </p>
                <div class='source'>
                    Source: Larry Page
                </div>
            </article>

            <article class='fill'>
                <h3>
                    Image filling the slide (with optional header)
                </h3>
                <p>
                    <img src='images/example-cat.jpg'>
                </p>
                <div class='source white'>
                    Source: Eric Schmidt
                </div>
            </article>

            <article>
                <h3>
                    This slide has some code
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
                    </pre>
                </section>
            </article>

            <article class='smaller'>
                <h3>
                    This slide has some code (small font)
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
                    </pre>
                </section>
            </article>

            <article>
                <q>
                    The best way to predict the future is to invent it.
                </q>
                <div class='author'>
                    Alan Kay
                </div>
            </article>

            <article class='smaller'>
                <q>
                    A distributed system is one in which the failure of a computer 
                    you didn’t even know existed can render your own computer unusable.
                </q>
                <div class='author'>
                    Leslie Lamport
                </div>
            </article>

            <article class='nobackground'>
                <h3>
                    A slide with an embed + title
                </h3>

                <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
            </article>

            <article class='nobackground'>
                <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
            </article>

            <article class='fill'>
                <h3>
                    Full-slide embed with (optional) slide title on top
                </h3>
                <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
            </article>

            <article>
                <h3>
                    Thank you!
                </h3>

                <ul>
                    <li>
                        <a href='http://www.google.com'>google.com</a>
                </ul>
            </article>

        </section>

    </body>
</html>
